<template>
  <div v-show="$route.name == 'operate-store'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>运营账号管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card style="margin-bottom: 15px;">
      <div style="margin-bottom: 20px;">运营账号管理</div>
      <el-card style="margin-bottom: 25px;" v-for="item in userData" :label="item.username" :value="item.id" :key="item.id">
        <div class="title">
          <span style="margin-right: 10px;">{{item.username}}</span>
          <el-button type="primary" size="mini" @click="showChange(item.id, item.username)">编辑名称</el-button>
        </div>
        <el-checkbox-group v-model="item.operate_store">
          <el-checkbox v-for="item2 in storeList" :label="item2.base" :key="item2.base" v-if="(item2.base != 11 && item2.base != 15)">
            <div>{{item2.basename}}</div>
          </el-checkbox>
        </el-checkbox-group>
      </el-card>

      <el-row style="margin-top: 20px;">
        <el-col>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 弹出框 -->
    <el-dialog title="修改运营信息" :visible.sync="showDialogVisible" width="300">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="运营名称" prop="name">
          <el-input v-model="ruleForm.name" style="width: 200px;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveName">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      storeList: [],
      userData: [],
      showDialogVisible: false,
      ruleForm: {
        id: '',
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
    this.getStoreList()
    this.getOperateUser()
  },
  methods: {
    // 获取门店
    async getStoreList() {
      const { data: result } = await this.$http.get('/store/all')
      if (result.status !== 200) return this.$message.error(result.msg)
      this.storeList = result.data
    },
    async getOperateUser() {
      const params = {
        groupid: [3,4]
      }
      const { data: result } = await this.$http.get('/user', { params: params })
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      this.userData = result.data
    },
    showChange(id, name) {
      this.showDialogVisible = true
      this.ruleForm.id = id
      this.ruleForm.name = name
    },
    saveName() {
      this.userData.map(res => {
        if (res.id === this.ruleForm.id) {
          res.username = this.ruleForm.name
          return res
        }
      })
      this.showDialogVisible = false
    },
    async handleSubmit() {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('是否确定保存当前用户名与分配门店?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消保存')
      }
      const handleData = []
      let check = []
      let flag = 1
      this.userData.forEach(element => {
        if (flag === 1 && !element.username) {
          flag = 0
          this.$message.error('提交失败，运营账号名称不能为空')
          return false
        }
        if (flag === 1 && check.indexOf(element.username) !== -1) {
          flag = 0
          this.$message.error('名称重复')
          return false
        }
        check.push(element.username)
        handleData.push({
          id: element.id,
          username: element.username,
          operate_store: element.operate_store
        })
      })
      if (flag) {
        const { data: result } = await this.$http.post('/user', {data: handleData})
        if (result.status !== 200) {
          return this.$message.error(result.msg)
        }
        this.$message.success('保存成功')
        this.getOperateUser()
      } else {
        return false
      }
    }
  }
}
</script>
<style scoped>
  .title {
    margin-bottom: 15px;
    font-size: 14px;
  }
</style>